<script setup lang="ts">
import {inject, ref} from "vue";
import {Node} from "@antv/x6";

const formData = reactive<any>({
  texts:[]
})
const id=ref<string>()
const text=ref<string>()
const getNode=inject<()=>Node>('getNode')
if(getNode){
  const node=getNode()
  id.value=node.id
  node.setData(formData)
}
const addTexts=()=>{
  formData.texts.push(text.value)
  text.value=undefined
}
const del=(t:string)=>{
  formData.texts=formData.texts.filter(v=>v!==t)
}
onBeforeMount(()=>{
  if(getNode){
    const node=getNode()
    const d=node.getData()
    if (d){
      Object.assign(formData,d)
    }else {
      node.setData(formData)
    }
  }
})
onMounted(() => {})
watch(formData,()=>{
  if(getNode){
    const node=getNode()
    //console.log('node.setData',node,formData)
    node.setData(formData,{deep:true,overwrite:true})
  }
},{deep:true,immediate:false})
</script>

<template>
  <div class="node">
    <div class="line5 node-title">
      <div class="flow-dot" magnet="true" :class="'flow-exec'" x-type="input-exec" :x-id="'input-if_'+id"></div>
      <div>随机文本常量</div>
      <div class="flow-dot flow-right flow-exec" magnet="true" x-type="output-exec" :x-id="'output-exec_'+id"></div>
    </div>
    <div class="line5">
      <div class="flow-right">文字</div>
      <div class="flow-dot flow-string" magnet="true" x-type="output-text" :x-id="'output-text_'+id" x-key="text"></div>
    </div>
    <div class="line5">
      <el-input v-model="text"/>
      <el-button @click="addTexts">新增</el-button>
    </div>
    <div>
      <div class="line5" v-for="(t,index) in formData.texts" :key="index">
        <div style="color: #9f9f9f">常量{{index+1}}</div>
        <div style="overflow: hidden;color: #353434;flex: 1">{{t}}</div>
        <el-button link type="danger" @click="del(t)">删除</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
